<template>
    <div class="carLoan">
        <Alert type="success">车款</Alert>
        <Form ref="carLoanForm" :model="carLoanForm" :rules="carLoanFormValiate" :label-width="100">
            <div class="common_content" style="padding: 0px;">
                 <Row>
                     <Col>
                        <FormItem label="车辆价格(元)" prop="carPrice">
                            <Input v-model="carLoanForm.carPrice"   placeholder="" @on-change="inputPayPrice()" :disabled="isShowDetails||isDisabled" class="w200"/>
                        </FormItem>
                    </Col>
                    <common-ele-loan
                    :loanForm="carLoanForm"
                    :loanFormOld="carAdditioalLoanFormOld"
                    :isShowDetails="isShowDetails"
                    :loanFormValiate="carLoanFormValiate"
                    :selectProdInfo="selectCarProductInfo"
                    :queryProdInfo="queryCarProductInfo"
                    :monthPay="carMonthPay"
                    :discount="carDiscount"
                    :interest="carTotalInterest"
                    :applyNo="applyNo"
                    :uuid="uuid"
                    :isAppear="isAppear"
                    :isTail="isCarTail"
                    :prodId="mainProductId"
                    :isDisabled="isDisabled"
                    @isChange="isChange"
                    @validateSingle="validateSingle"
                    :discountOption="carDiscountOption"
                    :diver="diverType"
                    ref="carEle"
                     ></common-ele-loan>
                </Row>
            </div>
        </Form>
    </div>
</template>
<script>
import * as utils from '_p/afs-apply/assets/js/utils.js'
import CommonEleLoan from "../common-ele-loan/commonEleLoan.vue"
import vueEvent from "_p/afs-apply/assets/js/vueEvent.js"
export default {
    name:"carLoan",
    data(){
        return{
            tempCarLoan:"",
            diverType:"car",
            carLoanForm:{
                carPrice: this.carPrice,
                loanLimit:0,
                downPayScale:"",
                downPayAmt:"",
                tailPayScale:"",
                tailPayAmt:"",
                loanAmt:"",
                custRate:"",
                monthPayAmt:"",
                totalInterest:"",
                maxDisCountAmt:"",
                discountType:"",
                discountTotalAmt:"",
                payRate:"",
                loadList:[],
                settleRate:"",
            },
            carLoanFormValiate:{
                downPayScale:[]
            },
            //留痕
            carAdditioalLoanFormOld:{
                carPrice:"",
                additionalTotalAmt:"",
                //项目融资列表
                additionalAmtList:[
                ],
                loanLimit:0,
                downPayScale:"",
                downPayAmt:"",
                tailPayScale:"",
                tailPayAmt:"",
                loanAmt:"",
                custRate:"",
                monthPayAmt:"",
                totalInterest:"",
                /* maxDisCountAmt:"",*/
                discountType:"",
                /* discountTotalAmt:"",*/
                payRate:"",
            },
        }
    },
    computed:{
    },
    components:{
        CommonEleLoan,
    },
    props:{
        queryCarProductInfo:{
            type:Object,
        },
        selectCarProductInfo:{
            type:Object,
        },
        isAdditional:{
            type:String
        },
        isSubProduct:{
            type:String
        },
        isCarTail:{
            type:Boolean
        },
        isAppear: {
            type: Boolean
        },
        uuid:{
            type:String,
        },
        carPrice:{
            type:String,
        },
        isShowDetails:{
            type:Boolean,
        },
        mainProductId:{
            type:String
        },
        applyNo:{
            type:String
        },
        isDisabled:{
            type:Boolean
        },
        carDiscountOption:{
            type:String
        },
        // totalInfoData:{
        //     type:Object,
        // },
        carMonthPay:{
            type:Number
        },
        carDiscount:{
            type:Number
        },
        carTotalInterest:{
            type:Number
        }

    },
    watch:{
        carPrice(val){
            if(val){
                this.carLoanForm.carPrice=val;
            }
        },
        queryCarProductInfo(val){
            if(Object.keys(val).length>0){
                //input的必输类型为string
                this.carLoanForm.carPrice=val.costInfo.contractAmt.toString();
                this.tempCarLoan=val.costInfo.loanAmt;
                //留痕
                this.carAdditioalLoanFormOld=val.costInfo
            }
        },
        // 车款首付金额
        "carLoanForm.downPayAmt":{
            handler(val){
                vueEvent.$emit('to-carDownPayAmt',val,this.uuid);
            }
        },
        // 车款贷款金额
        "carLoanForm.loanAmt":{
            handler(val){
                vueEvent.$emit('to-carLoanAmt',val,this.uuid);
            }
        },
        "carLoanForm.carPrice":{
            immediate: true,
            handler(val){
                vueEvent.$emit('to-carPrice',val,this.uuid);
            }
        },
    },
    created(){

    },
    mounted(){
        let self=this;
        vueEvent.$on('to-totalLoanAmt',function(data,id,total,operFlag){
            if(id==self.uuid){
                if(self.isAdditional=="1"&&self.isSubProduct=="1"){
                    let carloan=utils.divided(utils.multiply(self.tempCarLoan,data),total);
                    let carloanAmt=Math.round(carloan*100)/100;
                    // watch监听的贷款金额触发了两次，但是时间间隔太短,忽略不计
                    self.carLoanForm.loanAmt=carloanAmt;
                    self.$refs.carEle.inputLoanAmt(carloanAmt,operFlag);
                    let additionalloanAmt=utils.sub(data,carloanAmt);
                    vueEvent.$emit('to-caluateAddAmt',additionalloanAmt,self.uuid,operFlag);
                }else if(self.isAdditional=="0"){
                    self.carLoanForm.loanAmt=data;
                    self.$refs.carEle.inputLoanAmt(data,operFlag);
                }
            }
        })
    },
    beforeDestroy () {
        vueEvent.$off("to-totalLoanAmt");
    },
    methods:{
        isChange(val){
            this.$emit('isChange',val);
        },
        isDeal() {
            this.$refs.carEle.isDeal();
        },
        validateSingle(type){
             this.$refs.carLoanForm.validateField(type);
        },
        submitCarLoan(){
            let carVailate=false;
            this.$refs.carLoanForm.validate((valid) => {
                if(valid){
                    carVailate=valid;
                }else{
                    carVailate=false;
                }
            })
            if(carVailate){
                return this.carLoanForm;
            }else{
                return false;
            }
        },
        // 清空数据
        resetCarLoan(){
            this.$refs["carLoanForm"].fields.forEach(function (e) {
                if (e.prop !="carPrice") {
                    e.resetField()
                }
            })
            this.carLoanForm.carPrice=this.carPrice;
        }

    }
}
</script>
<style scoped>
.term span{
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
    margin-left: 5px;
    text-align: center;
    cursor: pointer;
}
.term span>i{
    font-style: normal;
    height: 20px;
    width: 20px;
    display: inline-block;
}
.term span.active>i,.term span>i:hover{
    background: #0D8EF5;
    color: white;
}
.w400{
    width: 400px;
}
.carLoan .ivu-col{
    width: 33.3%;
    float: left;
}
</style>
